<template>
  <div id="Question">
    <vj-list style="margin-top: 10px" :load-more="onFeqLoad.bind(this)">
      <template #default="{item:{mistitle,name,title,sortName,replyNo,createTime,id,replyno}}">
        <section @click="$pushRoute({path:'/support/feq',query:{customId:id}})" class="c-feq">
          <h3 class="c-feq__title">{{mistitle}}</h3>
          <div class="c-feq__member">
            <van-image fit="cover" class="c-feq__avatar" :src="avatar"/>
            <em>{{name}}</em>
          </div>
          <p class="c-feq__content">{{title}}</p>
          <footer class="feq-footer">
            <aside class="feq-footer__wrap">
              <div class="feq-footer__tag">{{sortName}}</div>
              <span>{{replyno}} 回答</span>
            </aside>
            <em>{{createTime}}</em>
          </footer>
        </section>
      </template>
    </vj-list>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import VjList from "@/components/vj-list.vue";
import {requestByGet} from "@/utils/request";
import {avatar} from "@/config/properties";
import {mapState} from "vuex";
@Component({
  components: {VjList},
  computed:mapState(["userInfo"])
})
export default class Question extends Vue implements ComponentOptions<Vue> {
  name = "Question";
  avatar = avatar;
  async onFeqLoad(pageNo, pageSize) {
    const {records} = await requestByGet(`/qqc/qqcMistake/yhList`, {pageNo, pageSize,userId:this.userInfo.phone});
    return records;
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#Question {
  .c-feq {
    &__title {
      font-size: 16px;
    }
    &__member {
      @include alignCenter;
      font-size: 12px;
    }
    &__avatar {
      @include round(20px);
      margin-right: 6px;
    }
    &__content {
      color: $p-color;
      line-height: 1.3;
      margin: 5px 0 3px;
      @include t-overflow(2);
    }
    .feq-footer {
      @include flex-between;
      font-size: 12px;
      &__wrap {
        @include alignCenter;
      }
      &__tag {
        padding: 3px;
        line-height: 1;
        border-radius: 2px;
        background: #f5f5f5;
        margin-right: 3px;
      }
    }
  }

}
</style>
